<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/style.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="js/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="js/bootstrap.min.js"></script>
    <!--彈出框核心文件-->
    <script type="text/javascript" src="js/layer.js"></script>
    <link href="css/layer.css" type="text/css" rel="styleSheet" id="layermcss">
    <script type="text/javascript" src="js/pop.js"></script>
    <script type="text/javascript" src="js/jquery.toast.min.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="js/style.js" charset="utf-8"></script>
    <link rel="stylesheet" href="css/jquery.toast.min.css">
    <title>商品添加</title>
</head>
<body onload="Popover()">
<div class="record-main">
    <div class="add-shop-title">
        <a href="" onclick="history.go(-1)"><i><img src="images/back-btn.png" width="20px" alt=""/></i>返回</a></div>
    <div class="xf-list-content shop-add">
        <form method="post" name="multiform" action="" enctype="multipart/form-data" onsubmit="return doSubmit()">
            <input type="hidden" name="menuPram" id="menuPram" />
            <div class="name">
                <span class="shop-add-span" style="width: 100px;"><i class="add-star" style="margin: 5px; color: #00a189; width: 100px;">*</i>商品分類：</span>
                <select name="takeOutMenuType.id" id="typeId" class="form-control" >
                    <option value="">请选择商品分类</option>
                    <option value="">去芝士的茶(可退4元)</option>

                    <option value="">折扣</option>

                    <option value="">liangban</option>

                    <option value="">无敌水果茶</option>

                    <option value="">奶茶(升级版)</option>

                    <option value="">100%水果茶</option>

                    <option value="">升级版脱脂芝士奶盖</option>

                    <option value="">个月</option>

                    <option value="">热销</option>

                </select>
                <button type="button" class="btn btn-default" onclick="fenlei()" data-toggle="modal" style="margin-left: 20px; color: #00a189; border: 1px solid #00a189; outline: none;">添加分类</button>
            </div>
            <div class="name">
                <span style="width: 100px;"><i class="add-star" style="margin: 5px; color: #00a189;">*</i>商品名稱：</span> <input type="text" class="form-control required" name="name" id="name" data-toggle="popover" data-placement="right" data-trigger="focus" data-content="建议名称不要超过15个字，超出部分建议录入到商品当中"maxlength="15" value="" />
            </div>
            <div class="name">
                <span style="width: 100px;">商品圖片：</span>
                <div class="form-group up-img">
                    <div class="album-old">
                        <div class="upload-btn btn-old">
                            <input type="file" name="picfile" id="picfile">
                        </div>
                        <div class="upload-img" id="upload-img"></div>
                        <span class="del-img del-btn" style="width: 20px; height: 20px;" onclick="delImg()"></span>
                    </div>
                </div>
            </div>
            <div class="name">
                <span style="width: 100px;"><i class="add-star" style="margin: 5px; color: #00a189;">*</i>商品價格：</span>
                <div class="form-group">
                    <input type="number" id="price" onkeyup="replace(this);" name="price" min="0" class="sure-pwd form-control required" value="" />
                </div>
            </div>
            <div class="name">
                <span style="width: 100px;"><i class="add-star" style="margin: 5px; color: #00a189;">*</i>庫存：</span>
                <div class="form-group">
                    <input type="number" onkeyup="replace(this);"  data-toggle="popover" data-placement="right" data-content="库存为无限时请填写-1" data-trigger="focus" name="stock" id="number" min="0" class="sure-pwd form-control required" value="" />
                </div>
            </div>
            <div class="name">
                <div style="float: left;clear: both">
                    <span style="width: 100px;margin-top: 7px;"><i class="add-star" style="margin-right: 5px; color: #00a189;">*</i>商品规格：</span>
                </div>
                <div class="form-group add-standard-list">
                    <div class="standard-default">
                        <div class="standard-list" id="standard-default">
                            <div class="standard-box standard-stan">
                                <span><i class="add-star" style="margin: 5px; color: #00a189;">*</i>规格</span>
                                <p><input type="text" rel="popover" onfocus="showstandard(this)" data-trigger="focus" data-placement="bottom" data-placement="bottom"  maxlength="10" id="standard'+num+'"class="form-control"/></p>
                            </div>
                            <div class="standard-box standard-price">
                                <span><i class="add-star" style="margin: 5px; color: #00a189;">*</i>價格</span>
                                <p><input type="number" min="0" class="form-control"/></p>
                            </div>
                            <div class="standard-box standard-num">
                                <span><i class="add-star" style="margin: 5px; color: #00a189;">*</i>库存</span>
                                <p><input type="num" class="form-control" placeholder="-1" data-toggle="popover" data-placement="right" data-content="库存无限请填写-1" data-trigger="focus"/></p>
                            </div>
                            <div class="standard-box standard-meal-price">
                                <span><i class="add-star" style="margin: 5px; color: #00a189;">*</i>餐盒價格</span>
                                <p><input type="number" placeholder="0" min="0" class="form-control"/></p>
                            </div>
                            <div class="standard-box standard-meal-number">
                                <span><i class="add-star" style="margin: 5px; color: #00a189;">*</i>餐盒数量</span>
                                <p><input type="number" placeholder="1" min="0" class="form-control"/></p>
                            </div>
                        </div>
                    </div>
                    <div class="prepend-standard-show">

                    </div>
                    <div class="strandard-message" id="strandard-message">
                        <dl class="strandard-dl">
                            <dd class="strandard-dd" onclick="demo(this,3)">大份</dd>
                            <dd class="strandard-dd" onclick="demo(this,3)">
                                中份
                            </dd>
                            <dd class="strandard-dd" onclick="demo(this,3)">
                                小份
                            </dd>
                            <dd class="strandard-dd" onclick="demo(this,3)">
                                大
                            </dd>
                            <dd class="strandard-dd" onclick="demo(this,3)">
                                中
                            </dd>
                            <dd class="strandard-dd" onclick="demo(this,3)">
                                小
                            </dd>
                            <dd class="strandard-dd" onclick="demo(this,3)">
                                一份
                            </dd>
                            <dd class="strandard-dd" onclick="demo(this,3)">
                                半份
                            </dd>
                            <dd class="strandard-dd" onclick="demo(this,3)">
                                6寸
                            </dd>
                            <dd class="strandard-dd" onclick="demo(this,3)">
                                8寸
                            </dd>
                            <dd class="strandard-dd" onclick="demo(this,3)">
                                9寸
                            </dd>
                            <dd class="strandard-dd" onclick="demo(this,3)">
                                10寸
                            </dd>
                            <dd class="strandard-dd" onclick="demo(this,3)">
                                12寸
                            </dd>
                            <dd class="strandard-dd" onclick="demo(this,3)">
                                14寸
                            </dd>
                            <dd class="strandard-dd" onclick="demo(this,3)">
                                超大杯
                            </dd>
                            <dd class="strandard-dd" onclick="demo(this,3)">
                                大杯
                            </dd>
                            <dd class="strandard-dd" onclick="demo(this,3)">
                                中杯
                            </dd>
                            <dd class="strandard-dd" onclick="demo(this,3)">
                                标准杯
                            </dd>
                            <dd class="strandard-dd" onclick="demo(this,3)">
                                小杯
                            </dd>
                        </dl>
                    </div>
                    <div class="add-property add-standard" id="addStandard">添加规格</div>
                </div>
            </div>
            <div class="name" style="clear: both">
                <div style="float: left;">
                    <span style="width: 100px;margin-top: 7px;">商品屬性：</span>
                </div>
                <div class="form-group add-property-list">
                    <div class="add-list"></div>
                    <div class="property-message">
                        <div class="strandard-message" id="box1-list" style="margin-right: 10px; display: none">
                            <dl class="strandard-dl">
                                <dd class="strandard-dd propertyDd">溫度</dd>
                                <dd class="strandard-dd propertyDd">冷热</dd>
                                <dd class="strandard-dd propertyDd">辣度</dd>
                                <dd class="strandard-dd propertyDd">口味</dd>
                                <dd class="strandard-dd propertyDd">甜度</dd>
                                <dd class="strandard-dd propertyDd">加料</dd>
                            </dl>
                        </div>
                        <div class="message-box1 message-box2 box2_list">
                            <div class="strandard-message" id="box2_list1">
                                <dl class="strandard-dl">
                                    <dd class="strandard-dd propertyVal">热</dd>
                                    <dd class="strandard-dd propertyVal">常温</dd>
                                    <dd class="strandard-dd propertyVal">去冰</dd>
                                    <dd class="strandard-dd propertyVal">少冰</dd>
                                </dl>
                            </div>
                            <div class="strandard-message" id="box2_list2">
                                <dl class="strandard-dl">
                                    <dd class="strandard-dd propertyVal">热</dd>
                                    <dd class="strandard-dd propertyVal" >常温</dd>
                                    <dd class="strandard-dd propertyVal" >去冰</dd>
                                    <dd class="strandard-dd propertyVal">少冰</dd>
                                </dl>
                            </div>
                            <div class="strandard-message" id="box2_list3">
                                <dl class="strandard-dl">
                                    <dd class="strandard-dd propertyVal">特辣</dd>
                                    <dd class="strandard-dd propertyVal">麻辣</dd>
                                    <dd class="strandard-dd propertyVal">中辣</dd>
                                    <dd class="strandard-dd propertyVal">微辣</dd>
                                </dl>
                            </div>
                            <div class="strandard-message" id="box2_list4">
                                <dl class="strandard-dl">
                                    <dd class="strandard-dd propertyVal">特辣</dd>
                                    <dd class="strandard-dd propertyVal">麻辣</dd>
                                    <dd class="strandard-dd propertyVal">中辣</dd>
                                    <dd class="strandard-dd propertyVal">微辣</dd>
                                    <dd class="strandard-dd propertyVal">微微辣</dd>
                                    <dd class="strandard-dd propertyVal">清淡</dd>
                                    <dd class="strandard-dd propertyVal">少盐</dd>
                                </dl>
                            </div>
                            <div class="strandard-message" id="box2_list5">
                                <dl class="strandard-dl">
                                    <dd class="strandard-dd propertyVal">无糖</dd>
                                    <dd class="strandard-dd propertyVal">少糖</dd>
                                    <dd class="strandard-dd propertyVal">半糖</dd>
                                    <dd class="strandard-dd propertyVal">多糖</dd>
                                </dl>
                            </div>
                            <div class="strandard-message" id="box2_list6">
                                <dl class="strandard-dl">
                                    <dd class="strandard-dd propertyVal">珍珠</dd>
                                    <dd class="strandard-dd propertyVal">椰果</dd>
                                    <dd class="strandard-dd propertyVal">波霸</dd>
                                    <dd class="strandard-dd propertyVal">红豆</dd>
                                </dl>
                            </div>
                        </div>
                    </div>

                    <div class="add-property" id="add">添加屬性</div>
                </div>
            </div>
            <div class="name">
                <span style="width: 100px;">商品單位：</span>
                <div class="form-group">
                    <input type="text" id="units" name="unit" data-toggle="popover" data-placement="right" data-content="商品單位不能超过20个字" data-trigger="focus" maxlength="20" class="sure-pwd form-control required" value="" />
                </div>
            </div>
            <div class="name">
                <span style="width: 100px;"><i class="add-star" style="margin: 5px; color: #00a189;">*</i>起售數：</span>
                <div class="form-group">
                    <input type="number" onkeyup="replace(this);"  id="q-number" data-toggle="popover" data-placement="right" data-content="商品起售份数" data-trigger="focus" min="0" name="minSale" class="sure-pwd form-control required" value="" />
                </div>
            </div>
            <div class="name">
                <span style="width: 100px;">商品描述：</span>
                <div class="form-group">
                    <textarea class="form-control " name="des" id="describe" rows="5" maxlength="160" style="width: 560px; height: 120px;"></textarea>
                </div>
            </div>
            <div class="add-submit text-center" style="clear: both">
                <a href="javascript:history.go(-1)" class="btn btn-default" style="color: #6c6666; background: #f2f1f1;outline: none">取消</a>
                <input type="submit" class="btn btn-default" style="color: #00a189;outline: none;border-color: #00a189; margin: 0 10px;" value="保存并继续添加">
                <input type="submit" class="btn btn-default" style="background: #00a189; color: white;outline: none" value="保存并返回">
            </div>
        </form>
    </div>
</div>
<!-- 商品分類管理 -->
<div class="myModal" id="myModal3" style="display: none; z-index: 999" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" id="modal-dialog3" role="document" style="width: 500px; height: 370px;">
        <form action="">
            <div class="modal-content">
                <div class="modal-body del-modal class-list-modal" style="clear: both; padding: 20px 20px;">
                    <h4 style="color: #6c6666;">添加分类</h4>
                    <a  style="float: right;text-decoration:none;margin-top:-35px;text-align: center;font-size: 20px;color: #6c6666;cursor: pointer" onclick="hide()">×</a>
                    <div style="clear: both; margin-top: 20px;">
                        <div class="form-group" style="clear: both; margin-right: 20px; width: 280px;">
                            <input type="text" id="typeName" class="form-control" placeholder="請輸入分類商品名稱" />
                        </div>
                    </div>
                </div>
                <div class="modal-footer class-list-btn" style="border-top: none">
                    <button type="button" class="btn btn-default" style="outline: none; color: #6c6666; border-radius: 5px;" onclick="hide()">取消</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal" style="border-radius: 5px; background: #00a189; outline: none;">
                        <a id="saveBtn" href="javascript:addType();" style="color: #ffffff; text-decoration: none">保存</a>
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/iscroll-zoom.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script>
    //添加属性
    var index = 0;
    $('#add').click(
            function() {
                $(".add-list").append(
                        '<div class="property" style="margin-top: 10px;height: 40px;">' + '<input type="text"  id="property' + index
                        + '" name="property" oninput="hidePopover1()" rel="popover1" data-trigger="focus" data-placement="bottom" style="float: left;" class="sure-pwd form-control required" placeholder="例如:口味" onfocus="showproperty(this)"  />' + '<input type="text" id="propertyPram' + index
                        + '" name="propertyPram" oninput="hidePopover2()" rel="popoverPropertyValue" data-trigger="focus" data-placement="bottom" onfocus="showproperty(this)" class="sure-pwd form-control required" style="margin-left: 10px;" placeholder="例如:少盐,用空格隔开"/>' + '<a onclick="getDel(this);" class="del-box del-btn"></a>' + '</div>');
                index++;
                Popover();
            });
    //气泡提示
    function Popover(){
        $('[rel=popover1]').popover({
            html : true,
            content: function() {
                return $('#box1-list').html();
            }
        });
        $('[rel="popoverPropertyValue"]').popover({
            html : true,
            content : function() {
                var map = {
                    "溫度" : "1",
                    "冷热" : "2",
                    "辣度" : "3",
                    "口味" : "4",
                    "甜度" : "5",
                    "加料" : "6"
                }
                var val = this.previousSibling.value;//获取前一个同胞的值

                if(val==null||val==''){
                    val = this.previousSibling.previousSibling.value;
                }
                var data = map[val.trim()];
                var htmlData = $('#box2_list' + data).html();
                return htmlData;
            }
        });
    }
    var curr_click_node;//定义一个获取焦点的变量
    // 选择属性
    $(document).on("click", ".propertyDd", function() {
        curr_click_node.value = this.innerHTML;
        $('[rel=popoverProperty]').popover('hide');
    });
    // 选择属性的值
    $(document).on("click", ".propertyVal", function() {
        var dataVal = this.innerHTML;
        if (curr_click_node.value.indexOf(dataVal.trim()) == -1) {
            curr_click_node.value = curr_click_node.value + ' ' + this.innerHTML;
        }
        $('[rel=popoverPropertyValue]').popover('hide');
    });
    //手写自动隐藏气泡
    function hidePopover1(){
        $('[rel=popover1]').popover('hide');
    }
    function hidePopover2(){
     $('[rel=popoverPropertyValue]').popover('hide');
    }
    //添加规格
    $('#addStandard').click(
            function() {
                $(".prepend-standard-show").append(
                        '<div class="standard-list" id="standard-list" >'+
                        '<div class="standard-box standard-stan">'+
                        '<span><i class="add-star" style="margin: 5px; color: #00a189;">*</i>规格</span>'+
                        '<p><input type="text" rel="popover" onfocus="showstandard(this)" data-trigger="focus" data-placement="bottom" data-placement="bottom"  maxlength="10" id="standar" class="form-control"/></p>'+
                        '</div>'+
                        '<div class="standard-box standard-price">'+
                        '<span><i class="add-star" style="margin: 5px; color: #00a189;">*</i>價格</span>'+
                        '<p><input type="number" min="0" class="form-control"/></p>'+
                        '</div>'+
                        '<div class="standard-box standard-num">'+
                        '<span><i class="add-star" style="margin: 5px; color: #00a189;">*</i>库存</span>'+
                        '<p><input type="num" placeholder="1" class="form-control" data-toggle="popover" data-placement="right" data-content="库存无限请填写-1" data-trigger="focus"/></p>'+
                        '</div>'+
                        '<div class="standard-box standard-meal-price">'+
                        '<span><i class="add-star" style="margin: 5px; color: #00a189;">*</i>餐盒價格</span>'+
                        '<p><input type="number" min="0"  placeholder="0" class="form-control"/></p>'+
                        '</div>'+
                        '<div class="standard-box standard-meal-number">'+
                        '<span><i class="add-star" style="margin: 5px; color: #00a189;">*</i>餐盒数量</span>'+
                        '<p><input type="number" min="0" placeholder="1" class="form-control"/></p>'+
                        '</div>'+
                        '<div class="del-standard-list">'+
                        '<a onclick="standardDel(this);" class="del-box del-btn"></a>'+
                        '</div>'+
                        '</div>'
                );
                //循环列表信息提示
                $(document).ready(function(){
                    $('[data-toggle="popover"]').popover();
                    /*规格气泡*/
                    $('[rel=popover]').popover({
                        html : true,
                        content: function() {
                            return $('#strandard-message').html();
                        }
                    });
                });
                //规格样式显示
                $(".standard-stan").css("display","block");
            }
    );

    function standardDel(obj) {
        $(obj).parent().parent().remove();
        checkedStandard();
    }
    function getDel(k) {
        $(k).parent().remove();
    }
    //检查规格列表个数隐藏规格
    function checkedStandard(){
        var standardfalut=$("div[id='standard-default']").length;//编辑的区域的数量
        var standardList=$("#standard-list").length;//新增的区域的数量
        if((standardfalut+standardList)<=1){
            $(".standard-stan").css("display","none");
        }
    }
    function addType() {

        var typeName = $('#typeName').val();
        if (typeName == '') {
            com.toast("分类商品名称不能为空。");
            return;
        }

        var dataVal = new Object();
        dataVal.typeName = typeName;
        $.ajax({
            type : 'POST',
            dataType : "json",
            contentType : "application/json",
            url : "../takeOutMenu/menuTypeAdd.shtml",
            data : JSON.stringify(dataVal),
            beforeSend : function() {
                pop.loading("");
            },
            success : function(data) {
                if (data.resultCode == 0) {
                    var menuType = data.detailMsg;
                    $('#myModal3').hide();
                    $('#typeId').append('<option value='+menuType.id+' selected>' + menuType.typeName + '</option>');
                    $('#typeName').val('');
                    com.toast('添加商品分类成功。');
                } else {
                    com.toast(data.businessMsg.businessNote);
                }
                pop.close();
            }
        });
    }
    function demo(obj, tip) {
        if (tip == 1) {
            curr_click_node.value = obj.innerHTML;
        }
        if (tip == 2) {
            var dataVal = curr_click_node.nextSibling.value;
            if (dataVal.indexOf(obj.innerHTML) == -1) {
                curr_click_node.nextSibling.value = curr_click_node.nextSibling.value + ' ' + obj.innerHTML;
            }
        }
        if (tip == 3) {
            curr_click_node.value = obj.innerHTML.trim();
        }
    }
    function showstandard(obj){
        curr_click_node = obj;
    }
    function delImg() {
        $(".upload-img").find("img").css("opacity", 0);
        $(".del-img").css("opacity", 0);

        var input = $("#picfile");
        input.replaceWith(input.val('').clone(true));
        $("#upload-img").html("");
        picAllow = true;
    }

    function showproperty(obj) {
        curr_click_node = obj;
    }
    var picAllow = true;
    $(':file').change(function() {
        var file = this.files[0];
        size = file.size;
        if (size > 120000) {
            pop.a('<div style="padding: 10px;"><span>提示信息</span><p style="margin: 20px;">上传的图片不能超过100K.<p></div>');
            picAllow = false;
        } else {
            picAllow = true;
        }
    });
</script>
</body>
</html>